import QtQuick 1.1
import com.nokia.meego 1.0
import '../Components'
import '../APIs'
import '../Views'
import '../Delegates'

AbstractPage {
    id: root

    property variant event
    title: event ? event.title : ''

    TabGroup {
        id: view
        anchors.fill: parent
        anchors.topMargin: root.headerHeight

        currentTab: detailPage

        onCurrentTabChanged: if (menu.status !== DialogStatus.Closed) menu.close()

        Page {
            id: detailPage
            Flickable {
                id: detailView
                anchors.fill: parent
                contentHeight: detail.height
                clip: true

                Column {
                    id: detail
                    width: parent.width
                    spacing: constants.defaultMargin

                    Row {
                        spacing: constants.defaultMargin
                        Image {
                            source: 'image://theme/icon-m-toolbar-clock'
                            width: constants.iconDefaultSize
                            height: constants.iconDefaultSize
                            smooth: true
                        }

                        Label {
                            DateTime { id: started_at; source: event ? event.started_at : '' }
                            text: started_at.toLocalString()
                            platformStyle: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                        }
                        Label {
                            text: qsTr('~')
                            platformStyle: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                        }
                        Label {
                            DateTime { id: ended_at; source: event ? event.ended_at : '' }
                            text: ended_at.toLocalString()
                            platformStyle: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                        }
                    }

                    Row {
                        spacing: constants.defaultMargin
                        Image {
                            source: 'image://theme/icon-m-common-location'
                            width: constants.iconDefaultSize
                            height: constants.iconDefaultSize
                            smooth: true
                        }
                        Label {
                            text: event ? event.place : ''
                            platformStyle: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                        }
                    }
                    Row {
                        x: constants.iconDefaultSize + constants.defaultMargin
                        spacing: constants.defaultMargin
                        Label {
                            text: event ? event.address : ''
                            platformStyle: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                        }
                    }
                    Row {
                        x: constants.iconDefaultSize + constants.defaultMargin
                        spacing: constants.defaultMargin
                        Label {
                            text: event ? event.url : ''
                            platformStyle: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: 'red' }
                            font.underline: true
                            MouseArea {
                                anchors.fill: parent
                                onClicked: ActionHandler.openUrlExternally(event.url)
                            }
                        }
                    }
                    SpinnerImage {
                        x: constants.iconDefaultSize + constants.defaultMargin
                        source: event ? "http://maps.google.com/staticmap?zoom=15&center=" + event.lat + "," + event.lon + "&size=" + width + 'x' + height + "&markers=" + event.lat + "," + event.lon + ",red,a&saturation=-100" : ''
                        width: 480 - (constants.defaultMargin + constants.iconDefaultSize) * 2
                        height: width
                        MouseArea {
                            anchors.fill: parent
                            onClicked: ActionHandler.openUrlExternally("http://www.google.co.jp/maps?q=" + event.lat + "," + event.lon + "(" + event.address + ")")
                        }
                        Image {
                            anchors.centerIn: parent
                            source: 'image://theme/icon-m-toolbar-search'
                            visible: parent.status === Image.Ready
                        }
                    }
                }
            }
            ScrollDecorator {
                flickableItem: detailView
            }
        }

        Page {
            id: descriptionPage
            Flickable {
                id: descriptionView
                anchors.fill: parent
                contentHeight: description.height
                clip: true

                Label {
                    id: description
                    width: parent.width
                    text: event ? event.description : ''
                    wrapMode: Text.WrapAnywhere
                    platformStyle: LabelStyle { fontPixelSize: constants.fontSmallSize }
                    onLinkActivated: ActionHandler.openUrlExternally(link)
                }
            }
            ScrollDecorator {
                flickableItem: descriptionView
            }
        }

        Page {
            id: attendeePage
            ListView {
                id: attendeeView
                anchors.fill: parent
                clip: true
                spacing: constants.defaultMargin

                model: AttendeeModel {
                    searchQuery: event ? 'event_id='.concat(event.event_id) : ''
                }

                header: Item {
                    width: ListView.view.width
                    height: childrenRect.height
                    Row {
                        anchors.right: parent.right
                        spacing: constants.defaultMargin
                        Label {
                            style: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                            text: event ? event.accepted : '?'
                        }

                        Label {
                            style: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                            text: '/'
                        }

                        Label {
                            style: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                            text: event ? event.limit : '?'
                        }

                        Label {
                            style: LabelStyle { fontPixelSize: constants.fontDefaultSize; textColor: '#505050' }
                            text: event ? '('.concat(event.waiting).concat(')') : ''
                            visible: event ? event.waiting === 0 : false
                        }
                    }
                }


                delegate: AttendeeDelegate {
                    twitter_img: model.twitter_img
                    nickname: model.nickname
                    status: model.status
                }
            }
            ScrollDecorator {
                flickableItem: attendeeView
            }
        }
    }

    Menu {
        id: menu
        visualParent: pageStack
        MenuLayout {
            MenuItemWithIcon {
                text: qsTr("Show in browser")
                iconSource: 'image://theme/icon-l-browser-main-view'
                onClicked: ActionHandler.openUrlExternally("http://atnd.org/events/" + event.event_id + '?')
            }
            MenuItemWithIcon {
                text: qsTr("Show in maps")
                iconSource: 'image://theme/icon-l-maps-main-view'
                onClicked: ActionHandler.openUrlExternally("http://www.google.co.jp/maps?q=" + event.lat + "," + event.lon + "(" + event.address + ")")
            }
            MenuItemWithIcon {
                text: qsTr("Tweet")
                iconSource: 'image://theme/icon-l-twitter-main-view'
                onClicked: ActionHandler.openUrlExternally("http://twitter.com/share?original_referer=http://atnd.org/events/" + event.event_id + "&source=tweetbutton&text=" + event.title + "%20:%20ATND&url=http://atnd.org/events/" + event.event_id + "&via=atnd")
            }
            MenuItemWithIcon {
                text: qsTr("Open in calendar")
                iconSource: 'image://theme/icon-l-calendar-main-view'
                onClicked: ActionHandler.openUrlExternally("http://atnd.org/events/" + event.event_id + ".ics")
            }
            MenuItemWithIcon {
                text: qsTr("Add to event feed")
                iconSource: 'image://theme/icon-l-rss-main-view'
                onClicked: {
                    eventFeed.icon = '/usr/share/icons/hicolor/80x80/apps/qatnd80.png'
                    eventFeed.title = event.title
                    eventFeed.body = event.catch_
                    dateTime.source = event.started_at
                    eventFeed.timestamp = new Date(dateTime.year, dateTime.month - 1, dateTime.day, dateTime.hour, dateTime.minute, dateTime.second)
                    eventFeed.footer = event.place
                    eventFeed.video = false
                    eventFeed.url = 'atnd://'.concat(event.event_id)
                    eventFeed.sourceName = 'atnd'
                    eventFeed.sourceDisplayName = 'ATND'
                    eventFeed.add()
                }
            }
        }
    }

    toolBarLayout: ToolBarLayout {
        ToolIcon {
            platformIconId: "toolbar-back"
            onClicked: {
                menu.close()
                pageStack.pop()
            }
        }
        ButtonRow {
            TabButton {
                tab: detailPage
                iconSource: 'image://theme/icon-m-toolbar-home'.concat(theme.inverted ? "-white" : "")
            }
            TabButton {
                tab: descriptionPage
                iconSource: 'image://theme/icon-m-toolbar-list'.concat(theme.inverted ? "-white" : "")
            }
            TabButton {
                tab: attendeePage
                iconSource: 'image://theme/icon-m-toolbar-people'.concat(theme.inverted ? "-white" : "-dimmed-white")
            }
        }
        ToolIcon {
            platformIconId: "toolbar-view-menu"
            anchors.right: (parent === undefined) ? undefined : parent.right
            onClicked: (menu.status == DialogStatus.Closed) ? menu.open() : menu.close()
        }
    }
}
